<template>
  <!-- 实时监控 -->
  <div class="topContent">
    <a-tabs v-model:activeKey="activeKey" type="card" size="small" @change="handleChangeTab">
      <a-tab-pane tab="实时告警" key="1" />
      <a-tab-pane tab="未完成工单" key="2" />
    </a-tabs>
    <component
      :is="configComponent"
      :stationInfo="stationInfo"
      ref="errorRealTime"
    />
  </div>
</template>
<script setup>


import RealTime from "./conpoments/realTime.vue";
import ErrorOrder from "@/views/Operation/WorkOrder/Error.vue";

const route = useRoute()
const $api = inject("$api");
const props = defineProps({
  stationInfo: {
    type: Object,
  },
});
const activeKey = ref("1");
const configComponent = computed(() => {
  switch (activeKey.value) {
    case "1":
      return RealTime;
    case "2":
      return ErrorOrder;
    default:
    return RealTime;
  }
});
const errorRealTime = ref(null);
const handleChageStation = () => {
  errorRealTime.value.handleChageStation();
};
const handleChangeTab = async () => {
  await nextTick();
  handleChageStation();
}
onMounted(async () => {
  if (Object.keys(route.query).length) {
    // 如果有带参数，则将电站信息设置为跳转过来的参数
    activeKey.value = route.query.errorType;
  }
});
defineExpose({ handleChageStation });
</script>

<style lang="less" scoped>
</style>